import {Avatar, Radio} from 'antd';
import React, {useRef, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {isSuccess} from "@/utils/utils";
import {UserManager} from "@/services/api-functions";
import ProTable, {ActionType, ProColumns} from "@ant-design/pro-table";
import {SYS_ENUMS} from "../../../../utils/constants";


const VipList: React.FC<any> = ({}) => {
  const [vipKey, setVipKey] = useState<'ALL'|'EFFECT'|'EXPIRED'>('ALL');
  const [countInfo, setCountInfo] = useState<{ALL: number, EFFECT: number, EXPIRED: number}>({ALL:0, EFFECT: 0, EXPIRED: 0});
  const actionRef = useRef<ActionType>();
  const columns: ProColumns[] = [
    {
      title: '用户名',
      dataIndex: 'nickName',
      width: 250,
      ellipsis: true,
      fixed: 'left',
      render: (dom, record) => <><Avatar src={record?.avatarUrl}/><span>{record?.nickName}</span></>,
    },
    {
      title: '手机号码',
      dataIndex: 'phone',
      ellipsis: true,
      hideInSearch: true,
      width: 100,
    },
    {
      title: '用户等级',
      dataIndex: 'level',
      ellipsis: true,
      hideInSearch: true,
      width: 150,
      render: (dom, record) => <span>LV{record?.level}</span>,
    },
    {
      title: '会员状态',
      dataIndex: 'izMembers',
      valueEnum: {
        1: {text: '生效中', color: 'green'},
        0: {text: '已过期', color: 'gray'},
      },
      width: 130,
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '会员种类',
      dataIndex: 'membersType',
      valueEnum: SYS_ENUMS.MEMBER_TYPE,
      width: 130,
      hideInForm: true,
    },
    {
      title: '上次登录',
      dataIndex: 'lastLogin',
      valueType: 'dateTime',
      width: 170,
      hideInSearch: true,
      hideInForm: true,
    },
    {
      title: '到期时间',
      dataIndex: 'membersMaturity',
      valueType: 'dateTime',
      width: 170,
      hideInSearch: true,
      hideInForm: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      hideInSearch: true,
      hideInForm: true,
      fixed: 'right',
      render: (_, record) => [
        <a key="edit" href={`/member/user/detail/${record?.id}`}>详情</a>,
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable<any, any>
        headerTitle={<Radio.Group value={vipKey} onChange={(e) => {
          setVipKey(e.target.value)
          actionRef.current?.reload()
        }}>
          <Radio.Button value='ALL'>全部 {countInfo?.ALL ?? 0}</Radio.Button>
          <Radio.Button value='EFFECT'>生效中 {countInfo?.EFFECT ?? 0}</Radio.Button>
          <Radio.Button value='EXPIRED'>已过期 {countInfo?.EXPIRED ?? 0}</Radio.Button>
        </Radio.Group>}
        actionRef={actionRef}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}
        request={async (params) => {

          const {data: {data, total}, code}: any = await UserManager.allInfoList({...params, vipKey});

          const res = await UserManager.vipNum()

          if(isSuccess(res.code)){
            setCountInfo(res.data)
          }

          return {data: data || [], success: isSuccess(code), total: isSuccess(code) ? total : 0};
        }}
        columns={columns}
        scroll={{ x: 1300 }}
      />
    </PageContainer>
  );
};

export default VipList;
